<template>
    <div class="app-container">
        <div class="layout-content">
            <div class="user_content">
                <div class="avater">
                    <van-image round width="80px" height="80px" :src="userInfo.avatar" />
                    <!-- <van-uploader :after-read="afterRead" /> -->
                    <van-uploader :before-read="individualbeforeRead" :after-read="recordApprovaAfterRead">
                        <span>修改头像</span>
                        <van-icon name="arrow" />
                    </van-uploader>
                </div>
                <van-cell title="姓名" :value="userInfo.realname" />
                <van-cell title="账号" :value="userInfo.username" />
                <van-cell title="工号" :value="userInfo.workNo" />
                <van-cell title="手机号码" :value="userInfo.phone" />
                <van-cell title="角色" :value="userInfo.selectedrolesName" />
                <van-cell title="部门" :value="userInfo.orgCodeTxt" />
                <van-cell title="邮箱" :value="userInfo.email" />
            </div>
        </div>
        <div class="layout-footer">
            <TabBar :activeTab="4"></TabBar>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import { ACCESS_TOKEN, TENANT_ID } from "@/store/mutation-types";
import { Notify } from "vant";
import Cookies from "js-cookie";
import { axios } from "@/utils/request";
import TabBar from "@/components/TabBar";
import { postAction } from "@/api/manage";
import { mapActions } from "vuex";
export default {
    data () {
        return {
            userInfo: {},
            url: {
                edit: "sys/user/edit",
            },
            uploadUrl: "sys/common/upload",
        };
    },
    created () {
        this.userInfo = this.$store.getters.userInfo;
        console.log(this.$store.getters.userInfo);
    },
    components: {
        TabBar,
    },
    methods: {
        ...mapActions(["SetToken"]),
        individualbeforeRead (file) {
            if (file.type !== "image/jpeg" && file.type !== "image/png") {
                // Toast("请上传 jpg,png 格式图片");
                return false;
            }
            return true;
        },
        recordApprovaAfterRead (file) {
            if (file instanceof Array) {
                file.map((v) => {
                    v.status = "uploading";
                    v.message = "上传中...";
                    this.recorUploadImg(v);
                });
            } else {
                file.status = "uploading";
                file.message = "上传中...";
                this.recorUploadImg(file);
            }
        },
        recorUploadImg (file) {
            console.log(file, "file");
            const formData = new FormData();
            formData.append("file", file.file);
            formData.append("biz", "temp");
            axios
                .post(this.uploadUrl, formData, {
                    "content-type": "multipart/form-data",
                })
                .then((res) => {
                    if (res.success) {
                        this.userInfo.avatar = res.message;
                        postAction(this.url.edit, this.userInfo).then((res) => {
                            if (res.success) {
                                console.log(res);
                                console.log(this.userInfo);
                                this.SetToken({
                                    token: Vue.ls.get(ACCESS_TOKEN),
                                    userInfo: this.userInfo,
                                });
                            }
                        });
                    }
                })
                .catch((err) => {
                    Notify({
                        type: "warning",
                        message: "上传失败",
                    });
                    file.status = "failed";
                    file.message = "上传失败";
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.app-container {
    background-color: #f5f5f5;
    height: 100%;

    .layout-content {
        padding: 20px;
        background-color: #fff;

        .user_content {
            .avater {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;

                .van-uploader {
                    span {
                        font-size: 24px;
                    }

                    .van-icon {
                        font-size: 24px;
                    }
                }
            }

            .van-uploader {
                font-size: 24px;
            }
        }
    }
}
</style>
